<template>
	<view class="uni-flex uni-row">
		<view class="flex-item" 
			  v-for="(item, index) of navList" 
			  :key="item.value"
			  :class="item.value === current ? 'active' : ''"
			  @click="() => filterNav(item)"
	    >{{item.name}}</view>
	</view>
</template>

<script>
	export default {
		data (){
			return {
				current: 'all',
				navList: [
					{name: '全部', value: 'all'},
					{name: '精华', value: 'good'},
					{name: '分享', value: 'share'},
					{name: '问答', value: 'ask'},
					{name: '招聘', value: 'job'}
				]
			}
		},
		methods: {
			filterNav (item){
				this.current = item.value;
				this.$EventBus.$emit('tabBar', item.value)
			}
		}
	}
</script>

<style lang="scss">
	.uni-row{
		position: fixed;
		z-index: 999;
		width: 100%;
		background-color: #10AEFF;
		text-align: center;
		color: rgba(255, 255, 255, 0.7);
	}
	.flex-item{
		height: 40px;
		line-height: 40px;
		width: 25%;
		&:active,
		&.active{
			color: #fff;
		}
		&.active{
			border-bottom: 1px solid #fff;
		}
	}
</style>
